<template>
  <div >

    <v-touch @panstart.prevent="panStart"
             @panmove.prevent="panMove"
             @panend.prevent="panEnd">

      <div :style="{transform:`translateY(${1 + downFreshDistance}rem)`}" style="font-size:0.32rem;text-align:center;color:#000000;z-index:100;width:3.75rem;height:16rem;background-color: #ffffff;" class="container">

      </div>
    </v-touch>
    <div class="mw-row-style" style="position:relative;width:3.75rem;height:1rem;" :style="{transform:`translateY(${downFreshDistance}rem)`}">
      <img :src="cat_image" style="height:0.36rem;width:0.36rem;bottom:0.32rem;position: absolute;left:1.685rem;"></img>
      <div :class="{myanimation:isactive}" style="position: absolute;left:1.475rem;bottom:0.1rem;width:0.8rem;height:0.8rem;">
        <img :style="{bottom:cat_circle_bottom + 'rem'}" src="/static/cat_circle.png" style="left:0.36rem;position: absolute;width:0.08rem;height:0.08rem;"></img>

      </div>

    </div>
    <div class="mw-horizon-divider" style="z-index:10000;position:fixed;bottom:0.41rem;width:3.75rem;left:0;"></div>
    <div class="mw-row-style" style="z-index:10000;position:fixed;bottom:0;width:3.75rem;height:0.4rem;left:0;background-color:#ffffff">
      <img src="/static/cat_complete.png" style="margin-left:1.5rem;height:0.24rem;width:0.24rem;animation:firstanimation 0.4s linear alternate infinite; margin-right:0.1rem;"></img>
      <img src="/static/cat_down.png" style="height:0.24rem;width:0.24rem;animation:firstanimation 0.4s linear 0.2s alternate infinite; margin-right:0.1rem;"></img>
      <img src="/static/cat_refresh.png" style="height:0.24rem;width:0.24rem;animation:firstanimation 0.4s linear 0.4s alternate infinite; margin-right:0.1rem;"></img>
    </div>
  </div>


</template>

<script>
  import utils from '../../utils'
  export default {
    data() {
      return {
        first:0,
        second:0,

        cat_circle_bottom:0.18,
        downFreshDistance:-1,
        cat_rotate:0,
        transitiontime:0,
        touchStart:0,
        isactive:false,
        cat_image:"/static/cat_complete.png",
      }
    },
    methods:{
      panStart(e) {
        e.preventDefault();
        this.touchStart = e.center.y;

      },
      panMove(e) {
        e.preventDefault();
        if (this.downFreshDistance < -0.32) {
          debugger
          this.downFreshDistance = (e.center.y - this.touchStart) / this.GLOBAL.ratio - 1;
        } else if (this.downFreshDistance >= -32 && this.downFreshDistance < 0) {
          this.downFreshDistance = (e.center.y - this.touchStart) / this.GLOBAL.ratio - 1;
          this.cat_circle_bottom = 0.18 - (0.18 * ((e.center.y - this.touchStart) / this.GLOBAL.ratio - 0.68) / 0.32)
          this.cat_image = "/static/cat_down.png"
        } else if (this.downFreshDistance >= 0){
          this.cat_image = "/static/cat_refresh.png"
        }
      },
      panEnd(e) {
        e.preventDefault();
//        this.transitiontime = 1;
        var that =this
        this.isactive = true

        setTimeout(function(){
          that.isactive = false
          that.cat_image = "/static/cat_complete.png"
          that.cat_circle_bottom = 0.18
          setTimeout(function(){
            that.downFreshDistance = -1
            utils.toast("刷新成功")
          },500);
        },4000);
//        this.changeState();

      },
      changeState(){
        debugger
        var that = this
//        that.transitiontime = 0;
        setTimeout(function(){
          if (that.jishu % 2 == 0) {
            that.cat_rotate = -128;
          } else if (that.jishu % 2 == 1) {
            that.cat_rotate = -360;
          }
          that.jishu  = that.jishu + 1
          that.changeState()
        },that.transitiontime * 1000);

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  .myanimation {
    animation:mymove 0.8s ease-in-out infinite;
  }

  @keyframes mymove {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(360deg)
    }

  }
  @keyframes firstanimation {
    0% {
      margin-top: 0rem
    }

    100% {
      margin-top: 0.16rem
    }
  }
  @keyframes secondanimation {
    0% {
      margin-top: 0rem
    }

    100% {
      margin-top: 0.4rem
    }
  }
  @keyframes thirdanimation {
    0% {
      margin-top: 0rem
    }

    100% {
      margin-top: 0.4rem
    }
  }
</style>
